<template>
	<view :class="['group-popup-packbox', 'relative', type]">
		<comMask v-model="isSetShowPopup" :isNeedReadedClose="isCanClose">
			<view :class="['popup', type === 'appdownload' ? 'appdownload' : '']" :style="{ 'background-image': `url(${popupBgLink})` }">
				<view class="title-bg" v-if="type === 'group'"></view>
				
				<view class="popup-title font-hanserif-bold flex-justify-content-center flex-align-items-end" v-if="type === 'lastPlatform'">
					<view class="title-content" v-html="lastPlatformTxt"></view>
				</view>
				
				<view class="image-view flex-all-center" v-if="qrAppCodeLink" :style="{'background-image':  `url(${commonConfigs.domainFrontFileLink}/files/images/common/qr-code-bg.png)`}">
					<!-- #ifdef MP-WEIXIN -->
						<image :src="qrAppCodeLink" class="img" mode="aspectFit" show-menu-by-longpress />
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
						<image :src="qrAppCodeLink" class="img" mode="aspectFit" @longtap="saveImgToLocal(qrAppCodeLink)" />
					<!-- #endif -->
				</view>
			</view>
			<view class="tip-txt" v-if="wxpayTipContentPopup">{{wxpayTipContentPopup}}</view>
		</comMask>
	</view>
</template>

<script>
	import store from '@/store'
	
	import { setAppSaveImgFun } from "@/setupproject/TOOLS_FUN"

	export default {
		name: "comGroupPopup",
		props: {
			value: {
				type: Boolean,
				default: () => true
			},
			// 客服二维码
			qrAppCodeLink: {
				type: String
			},
			// 背景图片
			popupBgLink: {
				type: String,
				default: () => store.getters.commonConfigs.domainFrontFileLink + `/files/images/common/group-bg.png`
			},
			// 是否允许直接点击关闭
			isAllowedClickMaskClose: {
				type: Boolean,
				default: () => true
			},

			// 类型
			type: {
				type: String,
				default: () => 'group'
			},
			// 提示文案
			lastPlatformTxt: {
				type: String,
				default: () => ''
			}
		},
		data() {
			return {};
		},
		computed: {
			// 是否显示弹框
			isSetShowPopup: {
				get() {
					return this.value;
				},
				set(v) {
					this.$emit('input', v);
				}
			},
			// 是否可关闭弹框
			isCanClose() {
				return this.isAllowedClickMaskClose;
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			wxpayTipContentPopup() {
				return store.getters.wxpayTipContentPopup
			}
		},
		methods: {
			saveImgToLocal: function(imgUrl) {
				setAppSaveImgFun(imgUrl);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.group-popup-packbox {
		z-index: 1000000000;
		display: flex;
		align-items: center;
		justify-content: center;
		
		&.lastPlatform {
			.popup-title {
				height: 578rpx;
				font-size: 46rpx;
				color: #FFFFFF;
				.title-content {
					width: 60%;
					text-align: center;
				}
			}
		}
		
		.popup {
			width: 669rpx;
			height: 1042rpx;
			transition: 0.5s all;
			margin-left: 0rpx;
			background-size: 100% 100%;
			
			.title-bg {
				width: 100%;
				height: 580rpx;
			}
			.image-view {
				margin: -55rpx auto 15rpx auto;
				position: relative;
				left: 0rpx;
				width: 320rpx;
				height: 320rpx;
				background-size: 100% 100%;
				.img {
					width: 310rpx;
					height: 310rpx;
					border-radius: 16rpx;
				}
			}
			
			&.appdownload {
				width: 749rpx;
				height: 860rpx;
				padding: 376rpx 0 0 150rpx;
				.image-view {
					margin: 90rpx auto auto 66rpx;
				}
			}
		}
		.tip-txt{
			margin-top: 10rpx;
			color: #ffffff;
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>
